//底部导航点进其他页面 导航 tab 动画
.nav-slide-enter,
.nav-slide-leave-to {
  transform: translate3d(-100%, 0, 0);
}
.nav-slide-enter-active,
.nav-slide-leave-active {
  transition: all 5.5s;
}
// 底部导航之间相互切换 内容区域动画
.fade-enter {
  opacity: 0;
}
.fade-leave {
  opacity: 1;
}
.fade-enter-active {
  transition: opacity 0.5s;
}
.fade-leave-active {
  opacity: 0;
  transition: opacity 0s;
} //底部导航栏消失时一般为立马消失复制代码
// 前进：右边页面进入的同时，同时左边页面在消失
.slide-left-enter {
  //开始过渡的开始状态为沿X轴向右平移100%，开始过渡结束时向左平移到原位
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  transform: translate3d(-100%, 0, 0);
}
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 0.5s;
  position: absolute; // 解决：页面切换时空白闪屏的问题
}
// 后退：左边页面进入的同时，同时右边页面在消失
.slide-right-enter {
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  transform: translate3d(100%, 0, 0);
}

.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 0.5s;
  position: absolute; // 解决：页面切换时空白闪屏的问题
}
